<template>
  <div class="template_box">
    <!--    查询-->
    <div class="template_search">
      <!--      <div class="template_search_box">-->
      <!--        <div class="title">设备型号：</div>-->
      <!--        <a-input disabled v-model:value="device_number" placeholder="请输入搜索内容"/>-->
      <!--      </div>-->
      <div class="template_search_box">
        <div class="title">当前日期：</div>
        <!--        <a-input disabled v-model:value="device_person.params.InpuntTime" placeholder="请输入搜索内容"/>-->
        <a-date-picker v-model:value="device_person.params.inpuntTime" @change="onChange"/>
      </div>
      <div class="template_search_box">
        <div class="title">设备：</div>
        <a-select
            v-model:value="device_person.params.uEquipmentCode"
            placeholder="请选择"
            style="width: 100%"
            ref="select"
            @select="select_option"
        >
          <a-select-option v-for="(item,index) in device_person.device_list" :key="index" :value="item.uEquipmentCode">
            {{ item.equipmentName }}
          </a-select-option>
        </a-select>
        <!--        <a-input disabled v-model:value="terminal_number" placeholder="请选择"/>-->
      </div>
      <div class="template_search_box">
        <div class="title">班组：</div>
        <a-select
            placeholder="请选择"
            :disabled="device_person.team_list.length===0"
            v-model:value="device_person.params.cid"
            style="width: 100%"
            ref="select"
        >
          <a-select-option v-for="(item,index) in device_person.team_list" :key="index" :value="item.cId">
            {{ item.className }}
          </a-select-option>
        </a-select>
      </div>
      <div class="template_search_box">
        <a-button style="margin-right: 10px" type="primary" @click="search_data"
                  :disabled="(!device_person.params.inpuntTime)||(!device_person.params.cid)||(!device_person.params.uEquipmentCode)">
          查询
        </a-button>
        <a-button type="primary" disabled>重置</a-button>
      </div>
    </div>
    <!--    列表-->
    <div class="template_table">
      <div class="template_add_btn">
        <!--        <export_excel/>-->
<!--        <a-button type="primary" @click="export_data" style="margin-right: 0.3rem">导出</a-button>-->

        <!--        <a-button style="margin-right: 0.2rem" type="primary" @click="export_data">导出</a-button>-->
        <a-button type="primary" @click="re_flash">刷新</a-button>
      </div>
      <a-table :pagination="false" bordered :dataSource="device_person.data_list" :columns="columns">
        <template #operation="{ record }">

          <a @click="export_data">导出详情</a>
        </template>
      </a-table>
      <a-pagination v-if="pageObject.total>10" style="margin-top: 10px" v-model:current="pageObject.currentPage"
                    :total="pageObject.total"
                    @change="changePage"/>
    </div>
  </div>
</template>

<script>
import {defineComponent, ref, reactive} from 'vue';
import {edit_p_class, get_class_by_code, get_p_class_o} from "@/api/device/device_person"
import {message} from "ant-design-vue";
import {handle_key, handle_time} from "@/utils/handle_key";
import {cloneDeep} from "lodash-es";
import {useStore} from "vuex";
// import add_person_device from "@/views/device/add/add_person_device";
import {export_reportDay, get_equ_run_report_day, get_quality} from "@/api/cockpit/statistics"
import export_excel from "@/components/export_file/export_excel";
import {useRoute, useRouter} from "vue-router";
import {getEquipmentList} from "@/api/device/device";

function handle_time_data(data, start, end) {
  const s = data[start]
  const e = data[end]
  data['time_range'] = `${s}~${e}`
  return data
}

function handle_for_data(data = []) {
  const currentValue = []
  const retime = []
  const voltage = []
  for (let i = 0; i < data.length; i++) {
    currentValue.push(data[i]['currentValue'])
    retime.push(data[i]['retime'])
    voltage.push(data[i]['voltage'])
  }

  return {
    currentValue, retime, voltage
  }
}

function handle_data(data) {
  const all_data = handle_for_data(data.allData)
  const exData = handle_for_data(data.exData)
  return {
    all_data, exData
  };
}

export default defineComponent({
  // name: "WorkpieceInformation";
  name: "quality_traceability",
  props: {},
  setup() {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const dataSource = [];
    const columns = [
      // {
      //   title: '设备编号',
      //   dataIndex: 'equipmentCode',
      //   key: 'equipmentCode',
      // },
      {
        title: '设备名称',
        dataIndex: 'equipmentName',
        key: 'equipmentName',
        slots: {
          customRender: 'equipmentName',
        },
      },
      {
        title: '终端编号',
        dataIndex: 'uEquipmentCode',
        key: 'uEquipmentCode',
      },
      {
        title: '班制',
        dataIndex: 'className',
        key: 'className',
      },
      {
        title: '时间',
        dataIndex: 'time_range',
        key: 'time_range',
        slots: {
          customRender: 'time_range',
        },
      },
      {
        title: '设备使用人员',
        dataIndex: 'realname',
        key: 'realname',
      },
      // {
      //   title: '首次开机时间',
      //   dataIndex: 'openTime',
      //   key: 'openTime',
      //   slots: {
      //     customRender: 'openTime',
      //   },
      // },
      // {
      //   title: '开机时长',
      //   dataIndex: 'openHour',
      //   key: 'openHour',
      //   slots: {
      //     customRender: 'openHour',
      //   },
      // },
      {
        title: '焊接时间/h',
        dataIndex: 'vhour',
        key: 'vhour',
        slots: {
          customRender: 'vhour',
        },
      },
      //  开机率
      // {
      //   title: '开机率',
      //   dataIndex: 'uEquipmentCode',
      //   key: 'uEquipmentCode',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '稼动率',
      //   dataIndex: 'uEquipmentCode',
      //   key: 'uEquipmentCode',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '稼动率同比',
      //   dataIndex: 'uEquipmentCode',
      //   key: 'uEquipmentCode',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '参数异常率',
      //   dataIndex: 'id',
      //   key: 'id',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '所焊工件名称',
      //   dataIndex: 'id',
      //   key: 'id',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '图号',
      //   dataIndex: 'id',
      //   key: 'id',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      // {
      //   title: '编号',
      //   dataIndex: 'id',
      //   key: 'id',
      //   slots: {
      //     customRender: 'uEquipmentCode',
      //   },
      // },
      {
        title: '操作',
        dataIndex: 'edit',
        key: 'edit',
        slots: {
          customRender: 'operation',
        },
        width:120
      },
    ];
    const device_number = ref('')
    const device_type_number = ref('')
    const terminal_number = ref('')
    /**
     * 编辑的参数
     *
     * */
    const edit_params = reactive({
      "id": 0,
      "uEquipmentCode": "",
      "equipmentCode": "",
      "cId": 0,
      "userId": 0,
      "createTime": "",
      "updateTime": "",
      "createUserId": 0,
      "updateUserId": 0
    })
    /**
     * status
     *
     * */
    const statusObject = reactive({
      edit_status: false
    })
    /**
     * 编辑
     *
     * */
    const editableData = reactive({});
    const pageObject = reactive({
      currentPage: 1,
      total: 10,
      pageIndex: 1
    });
    /**
     * 请求参数
     * */
    const device_person = reactive({
      params: {
        // InpuntTime: "2021-05-04"
        inpuntTime: handle_time("YYYY-mm-dd", new Date()),
        "cid": null,
        "uEquipmentCode": ""

      },
      data_list: [],
      device_list: [],
      team_list: [],
      data: {}
    });
    //获取分页数据
    const changePage = (e) => {
      // console.log(e)
      pageObject.pageIndex = e
    };

    //列表删除确认
    const onDelete = key => {
      dataSource.value = dataSource.value.filter(item => item.key !== key);
    };
    //获取数据列表
    const get_list = async () => {
      const res = await get_quality(device_person.params)
      console.log(res)
      if (res.code === 1) {
        if (!res.data.tjData) {
          message.warning("数据异常")
          return
        }
        res.data.tjData = handle_time_data(res.data.tjData, 'btime', 'etime')
        device_person.data_list = handle_key([res.data.tjData])
        device_person.data = res.data
        pageObject.total = res.totalItems
        return
      }
      message.warning(res.message)
    }

    const edit = key => {
      editableData[key] = cloneDeep(device_person.data_list.filter(item => key === item.key)[0]);
      statusObject.edit_status = true;
    };
    const save = async key => {
      /*
      * 修改之后的参数
      * */
      edit_params.id = device_person.data_list[key].id;
      edit_params.uEquipmentCode = editableData[key].uEquipmentCode;
      edit_params.equipmentCode = editableData[key].equipmentCode;
      edit_params.userId = editableData[key].userId;
      const res = await edit_p_class(edit_params)
      console.log(res)
      if (res.code === 1) {
        delete editableData[key];
        statusObject.edit_status = false
        message.success("修改成功")
        get_list()
        return
      }
      message.warning(res.message)

    };

    const cancel = key => {
      delete editableData[key];
      statusObject.edit_status = false
    };
    /**
     * 获取用户信息列表
     * */


    const init = () => {
      get_device_list()
      //获取列表
      // get_list();

    }

    /**
     * 获取设备的列表
     *
     * */
    const get_device_list = async () => {
      const res = await getEquipmentList()
      console.log("设备数据", res)
      if (res.code === 1) {
        device_person.device_list = res.data
      }
    }

    /**
     *
     *
     * */
    const handle_user_id = (user_id) => {
      try {
        console.log(store.state.user.user_list)
        const data = store.state.user.user_list.filter((item) => item.userId == user_id);
        return data[0].realName
      } catch (e) {
        console.log("数据解析异常")
        return ""
      }

    }
    /**
     * 刷新
     * */
    const re_flash = () => {
      get_list()
    }

    /**
     * 新增
     * */
    const add_device_func = () => {
      store.commit("SET_ADD_ROLE", true)
    }
    /**
     *
     * 导出
     * */
    const export_data = () => {
      const {all_data, exData} = handle_data(device_person.data)
      device_person.data.allData = all_data
      device_person.data.exData = exData
      store.commit("SET_EXPORT_DATA", device_person.data)
      router.push({
        path: "/index/statistics/export_echarts",
        query: {
          filename: "",//文件名称
          inputTime: "", //查询时间
          id: 0 //班组id
        }
      })
      // message.error("文件导出异常,找不到当前文件")
    }


    /**
     * 查询
     * */
    const search_data = () => {
      device_person.params.inpuntTime = handle_time("YYYY-mm-dd", new Date(device_person.params.inpuntTime))
      get_list()
    }

    /**
     * 改变时间
     *
     * */
    const onChange = (val) => {
      console.log(val)
    }


    /**
     * 数据初始化
     *
     * */
    init();


    /**
     * select_option
     * */
    const select_option = async (key) => {
      console.log(key)
      let params = {
        "Code": key.toString()
      }
      const res = await get_class_by_code(params)
      console.log("班组列表", res)
      if (res.code === 1) {
        device_person.team_list = res.data
      }
    }

    const is_can_search = () => {
      return (!device_person.params.inpuntTime) || (!device_person.params.cid) || (!device_person.params.uEquipmentCode)
    }


    return {
      device_number,
      device_type_number,
      terminal_number,
      dataSource,
      columns,
      pageObject,
      device_person,
      handle_user_id,
      onDelete,
      changePage,
      editableData,
      statusObject,
      edit,
      save,
      cancel,
      store,
      re_flash,
      export_data,
      search_data,
      onChange,
      select_option,
      is_can_search
    };
  },
  components: {
    export_excel
  }
});

</script>

<style scoped lang="scss">
.template_box {
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
    }
  }
}
</style>
